<script setup lang="ts">

import { StarFilled, User } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
import ScIcon from '@/components/ico/user/scIcon.vue'


const route = useRoute().query['nc']
const n = ref(route)
const user = ref()
const district = ref()
const email = ref()
const phone = ref()
const gender = ref()
const img = ref()

function A(nb: string) {
  n.value = nb
}

axios.get('/api/user/getUser', {
  headers: {
    Authorization: localStorage.getItem('token')
  }
}).then((res) => {
  img.value = res.data.img
  user.value = res.data.user
  email.value = res.data.email
  phone.value = res.data.phone
  gender.value = res.data.gender
  district.value = res.data.district

})

const layout=ref(false)
const loa=ref(true)
setTimeout(()=>{
  loa.value = false
  layout.value = true
},1000)
</script>

<template>
  <div style="width: 100%;height: 100%" v-loading="loa">

    <div class="common-layout" v-if="layout">

      <div class="user">
        <div class="user-info">
          <div class="img">
            <img :src="img" alt="" width="100%" height="100%">
          </div>
          <div class="div_i" @click="A('1')">
            <el-icon class="icon">
              <User />
            </el-icon>
            个人信息
          </div>
          <div class="div_i" @click="A('2')">
            <el-icon class="icon">
              <StarFilled />
            </el-icon>
            收藏
          </div>
        </div>
        <div class="main">
          <div v-if="n==='1'">
            <div class="title">个人信息
              <el-divider border-style="dashed" />
            </div>
            <div class="div_p">昵称：{{ user }}</div>
            <div class="div_p">账号：{{ email }}</div>
            <div class="div_p">性别：{{ gender }}</div>
            <div class="div_p">电话：{{ phone }}</div>
            <div class="div_p">地区：{{ district }}</div>
            <div class="div_p">
              <el-button plain @click="open">修改个人信息</el-button>
            </div>
          </div>
          <div class="sc" v-if="n==='2'">
            <sc-icon />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped>
.el-button.is-plain {
  background-color: #8e8e8e00;
  color: #f6f6f6;
}

.div_p {

  margin-left: 90px;
  position: relative;
  top: 80px;
  width: 100%;
  height: 40px;
}

.title {
  font-size: 30px;
  margin-top: 40px;
}

.icon {
  width: 30px;
  position: relative;
  top: 2px;

}

.div_i {
  cursor: pointer;
  margin-top: 20px;
  height: 30px;
}

.user-info {
  width: 15%;
  margin: 3%;
}

.img {
  overflow: hidden;
  width: 150px;
  height: 150px;
  background-color: aliceblue;
  border-radius: 100px;
  margin: 0 auto 60px;

}

.main {
  width: 70%;
}

.common-layout {
  overflow: hidden;
  display: flex;
  width: 100%;
  height: 100vh;
  background: radial-gradient(#bdbdbd, rgba(0, 0, 0, 0.91));
  color: #f3f3f3;
}

.user {
  box-shadow: 0 1px 13px 1px black;
  width: 92%;
  height: 92%;
  margin: 35px auto 0;
  display: flex;
}
</style>